Skip to content

[Frontend] Global Search Bar UI Scaffold#320

Open
armorbreak001 wants to merge 1 commit intoGalactiGuild:mainfrom
armorbreak001:bounty/291-global-search-bar
Open

[Frontend] Global Search Bar UI Scaffold#320
armorbreak001 wants to merge 1 commit intoGalactiGuild:mainfrom
armorbreak001:bounty/291-global-search-bar

Conversation

@armorbreak001
Copy link
Copy Markdown

Fixes #291

What was done

  • Created CommandPalette component in src/components/Search/CommandPalette.tsx
  • Keyboard shortcut: Cmd+K / Ctrl+K opens the search modal (also Esc to close)
  • Search input: Auto-focuses on open, filters hardcoded results instantaneously as user types
  • Sectioned results: Dropdown divided into Guilds, Bounties, Users with category icons and labels
  • Keyboard navigation: Arrow keys (↑↓) navigate results, Enter selects, active item scrolls into view
  • Inline trigger: Renders as a compact search button when closed (with ⌘K badge)
  • No external dependencies — pure React with manual keyboard event handling

How to verify

  1. Open frontend/src/components/Search/CommandPalette.demo.tsx in your browser
  2. Press Cmd+K (or Ctrl+K) — command palette overlay opens, input auto-focused
  3. Type stellar — results filter instantly showing matching guilds/bounties/users
  4. Use arrow keys to navigate between results — active item highlights in blue
  5. Press Enter on a result — console logs navigation URL
  6. Press Esc or click backdrop to close

- Cmd+K / Ctrl+K keyboard shortcut to open/close
- Instant filtering over hardcoded result set (guilds, bounties, users)
- Keyboard arrow navigation (↑↓) with active item highlighting
- Enter to navigate, Escape to close
- Sectioned dropdown with icons (Guilds, Bounties, Users)
- Auto-focus input on open, backdrop blur overlay
- Fully responsive and accessible (ARIA roles)
@armorbreak001 armorbreak001 force-pushed the bounty/291-global-search-bar branch from 3da1810 to 9efa30e Compare April 14, 2026 12:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Global Search Bar UI Scaffold

1 participant